<template>
  <el-container class="height">
    <el-header>
      <Header></Header>
    </el-header>

    <el-main style="padding:0;overflow: hidden;">
      <el-container class="height">
        <el-aside style="max-width:200px;width:unset">
          <Siderbar></Siderbar>
        </el-aside>
        
        <el-main class="mainSty" :style="{height:mainHeight+'px',position: 'relative'}">
          <Breadcrumb ref="Breadcrumb"></Breadcrumb>
          <transition name="fade-transform" mode="out-in">
            <router-view :style="{height:height+'px'}"></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-main>
    <Scrolltotop></Scrolltotop>
  </el-container>
</template>

<script>
import Header from "./Header";
import Breadcrumb from "./Breadcrumb";
import Siderbar from "./Sidebar";
import Scrolltotop from "@/components/scrolltotop/Scrolltotop";
import ResizeMixin from "@/mixins/resizeHandler";

export default {
  name: "Full",
  components: {
    Header,
    Breadcrumb,
    Siderbar,
    Scrolltotop
  },
  data() {
    return {
      height: 0,
      mainHeight: 0,
      screenWidth: document.body.clientWidth //窗口分辨率
    };
  },
  mixins: [ResizeMixin],
  methods: {
    heightSet() {
      //设置相关高度
      var that = this;
      this.$nextTick(function () {
        var clientHeight = document.body.clientHeight; //屏幕高度
        var headerHeight = document.getElementsByClassName("header")[0].scrollHeight; //header高度
        var breadcrumbHeight = document.getElementsByClassName("breadcrumb")[0].clientHeight; //面包屑高度
        var breadcrumbMarginBottom = 10; //面包屑的MarginBottom
        var paddingHeght = 10; //padding的高度
        that.height = clientHeight - headerHeight - paddingHeght - breadcrumbHeight - breadcrumbMarginBottom;
        that.mainHeight = clientHeight - headerHeight+13;
      });
    }
  },
  mounted() {
    this.heightSet();
    var that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    };
    window["heightSet"] = () => {
      that.heightSet();
    };
  }
};
</script>

<style scoped lang="stylus">
@media (max-width: 920px) {
  .el-main {
    padding: 0;
  }
}

.el-header, .el-footer {
  color: #333;
  height: 50px !important;
  padding: 0;
}

.el-main {
  background-color: #f5f5f5;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.height {
  height: 100%;
}
</style>
<style lang="scss" scoped>
.mainSty{
  padding:5px 20px 0px 20px ;
}
</style>